import * as d3 from "d3";
import emitter from "../utils/eventbus";
import { Point } from "./common";
/**
 *
 * @param $ dom
 * @param start 开始点
 * @param end 结束点
 * @param color 线段颜色
 * @returns 绘制线 dom
 */
export function drawLine($: any, start: Point, end: Point, color: string = "#000000") {
  let id: string = $.attr("id");
  // 设置线段的起点和终点的坐标
  const lineData = [start, end];

  // 定义一个直线生成器
  const lineGenerator = d3
    .line()
    .x((d) => d.x)
    .y((d) => d.y);

  // 绘制直线
  const line = $.append("path").attr("d", lineGenerator(lineData)).attr("stroke", color).attr("stroke-width", 1).attr("fill", "none");
  // 监听事件
  emitter.on(id, (transform: any) => {
    line.attr("transform", transform);
    line.attr("stroke-width", 1 / transform.k);
  });
  // 返回
  return line;
}
/**
 * 曲线绘制
 * @param $ dom
 * @param points 点集合
 * @param mode 绘制模式 默认使用 curveCardinal
 * curveLinear - 线性插值，即直线段
 * curveStep - 阶梯状插值
 * curveStepBefore - 以x轴上的值为节点插值，向前平移一个节点，相当于向前弯曲
 * curveStepAfter - 以x轴上的值为节点插值，向后平移一个节点，相当于向后弯曲
 * curveBasis - 基本插值，将数据点转化为平滑曲线
 * curveCardinal - 基于Cardinal样条插值，平滑曲线
 * curveCatmullRom - 基于Catmull-Rom样条插值，平滑曲线
 * @param color 曲线颜色
 * @returns
 */
export function drawCurve($: any, points: Point[], mode: string = "", color: string = "#2e3326") {
  let id: string = $.attr("id");
  // 数据集
  const data = points;
  // 创建曲线生成器
  // const lineGenerator = d3
  //   .line()
  //   .x((d) => d.x/10)
  //   .y((d) => d.y/10);
  const lineGenerator = d3
    .line()
    .x((d) => d.x)
    .y((d) => d.y);
  // 曲线模式
  switch (mode) {
    case "curveLinear": {
      lineGenerator.curve(d3.curveLinear);
      break;
    }
    case "curveStep": {
      lineGenerator.curve(d3.curveStep);
      break;
    }
    case "curveStepBefore": {
      lineGenerator.curve(d3.curveStepBefore);
      break;
    }
    case "curveStepAfter": {
      lineGenerator.curve(d3.curveStepAfter);
      break;
    }
    case "curveBasis": {
      lineGenerator.curve(d3.curveBasis);
      break;
    }
    case "curveCardinal": {
      lineGenerator.curve(d3.curveCardinal);
      break;
    }
    case "curveCatmullRom": {
      lineGenerator.curve(d3.curveCatmullRom);
      break;
    }
    default: {
      lineGenerator.curve(d3.curveCardinal);
      break;
    }
  }

  // 绘制曲线
  const path = $.append("path").datum(data).attr("d", lineGenerator).attr("stroke", color).attr("stroke-width", 1).attr("fill", "none");

  emitter.on(id, (transform: any) => {
    path.attr("transform", transform);
    path.attr("stroke-width", 1 / transform.k);
  });
  //
  return path;
}

export function pathTransform(path: any, type: string = "") {
  // 将路径的描边设置为透明
  path.attr("stroke-dasharray", path.node().getTotalLength());
  path.attr("stroke-dashoffset", path.node().getTotalLength());
  // 添加动画
  path
    .transition()
    .duration(2000) // 动画持续3秒
    .ease(d3.easeLinear) // 线性过渡
    .attr("stroke-dashoffset", 0); // 将描边逐渐缩短为0
  switch (type) {
    case "area": {
      var fillColor = path.attr("fill");
      // 将面积填充的颜色设置为透明
      path.attr("fill", "transparent");
      path.attr("stroke-dashoffset", path.node().getTotalLength());
      // 添加出场动画
      path.transition()
        .delay(2000)
        .duration(2000)
        .ease(d3.easeLinear)
        .attr("fill", fillColor)
        .attr("stroke-dashoffset", 0);
      break;
    }
  }

}

export function pathArea($: any, points: Point[], type: string = "") {
  let id: string = $.attr("id");
  const data = points
  data.sort((a, b) => a.y - b.y);
  var area = d3
    .area()
    .y((p) => p.y)
    .x0((p) => p.x)
    .x1((p) => p.x1)
    .curve(d3.curveCardinal);

  const areaA = $.append("path")
    .datum(data)
    .attr("d", area(data))
    .attr("fill", "blue")
    .attr("stroke", "none");
  areaA.transition()
    .duration(3000)
    .delay(500)
    .ease(d3.easeBounce)
    .attr('cx', 400)
    .attr('cy', 100)
  const img = $.append("image")
    .attr("xlink:href", "http://150.158.135.236:8888/down/adbo4TLeN5xe.jpg")
    .attr("width", 150)
    .attr("height", 150)
    .attr("x", 200)
    .attr("y", 200);
  emitter.on(id, (transform: any) => {
    areaA.attr("transform", transform);
    areaA.attr("stroke-width", 1 / transform.k);
    img.attr("transform", transform)
  });
  return areaA
}

export function calcIntersection($: any, lineA: any, lineB: any) {

  console.log(lineA)
  const lineAGen = lineA.attr('d')
  const lineBGen = lineB.attr('d')
  var intersection = d3.pathIntersection(lineAGen, lineBGen);
  var intersectionX = intersection[0][0];
  var intersectionY = intersection[0][1];

  console.log("Intersection point: (" + intersectionX + "," + intersectionY + ")");

}
